var FilterSelect = function () {
  var template = /*html*/ `
    <el-select filterable v-model="selectValue" :disabled="disabled" :popper-class="popperClass" :filter-method="filterOption" :value-key="valueKey"
      @change="selectChange" :clearable="clearable" @visible-change="selectVisibleChange" :size="size" :empty-filter-text="emptyFilterText"
      :placeholder="placeholder">
      <el-option v-if="hasAllSelect&&showOptions.length!==0" value="" label="全部"></el-option>
      <template v-if="valueKey">
        <el-option v-for="(option,index) in showOptions" :key="option[valueField]+'_'+index" :value="option" :label="option[labelField]">
          <slot name="item" :option="option"></slot>
        </el-option>
      </template>
      <template v-else>
        <el-option v-for="(option,index) in showOptions" :key="option[valueField]+'_'+index" :value="option[valueField]" :label="option[labelField]">
          <slot name="item" :option="option"></slot>
        </el-option>
      </template>
    </el-select>
  `;

  return {
    props: {
      value: {
        required: true
      },
      valueKey: String,
      options: {
        type: Array,
        default: function () {
          return [];
        }
      },
      hasAllSelect: {
        type: Boolean,
        default: false
      },
      valueField: {
        type: String,
        default: 'value'
      },
      labelField: {
        type: String,
        default: 'label'
      },
      popperClass: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      filterMethod: {
        type: Function,
        default: null
      },
      clearable: {
        type: Boolean,
        default: false
      },
      pageSize: Number,
      size: String,
      emptyFilterText: Boolean,
      placeholder: String
    },
    watch: {
      value: function () {
        if (this.inputValue !== null) {
          this.inputValue = null;
          return;
        }
        this.selectValue = this.value;
      },
      options: function () {
        if (this.pageSize === undefined) {
          this.filterOption('');
        } else {
          var queryValue = this.value;
          this.filterOption(queryValue);
        }
      }
    },
    data: function () {
      return {
        selectValue: this.value,
        showOptions: [],
        inputValue: null
      };
    },
    created: function () {
      if (this.pageSize === undefined) {
        this.filterOption('');
      } else {
        var queryValue = this.value;
        this.filterOption(queryValue);
      }
    },
    methods: {
      selectChange: function () {
        var selectValue = this.selectValue;
        this.inputValue = selectValue;
        this.$emit('input', selectValue);
        this.$emit('change', selectValue);
      },

      filterOption: function (query) {
        var options = this.options;
        if (!SysUtil.isEmpty(query)) {
          var labelField = this.labelField;
          var filterMethod = this.filterMethod;
          query = query.toLowerCase();
          options = _.filter(options, function (option) {
            if (filterMethod !== null) {
              return filterMethod(query, option);
            }

            var value = option[labelField];
            value = value.toLowerCase();
            return value.indexOf(query) !== -1;
          });
        }

        var pageSize = this.pageSize;
        if (pageSize !== undefined) {
          options = options.slice(0, pageSize);
        }

        this.showOptions = options;
      },

      selectVisibleChange: function (isShow) {
        var self = this;
        if (!isShow) {
          setTimeout(function () {
            if (self.pageSize === undefined) {
              self.filterOption('');
            } else {
              var queryValue = self.value;
              self.filterOption(queryValue);
            }
          }, 100);
        }
        this.$emit('visible-change', isShow);
      }
    },
    template: template
  };
}();
